<template>
  <!-- 标题组件 -->
  <view class="title">
    <view class="name">
      <text>{{name}}</text>
      <text :style="{'background-image': `linear-gradient(to right, ${color[0]}, ${color[1]})`}">{{word}}</text>
    </view>
    <view class="all">
      全部 >
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      name: {
        type: String,
        default: "热门推荐"
      },
      word: {
        type: String,
        default: "HOT"
      },
      color: {
        type: Array,
        default: () => [
          '#FB6932',
          '#FA140E'
        ]
      }
    }
  }
</script>

<style lang="scss">
  .title {
    display: flex;
    justify-content: space-between;
    line-height: 38rpx;
    .name {
      text:nth-child(1) {
        font-size: 38rpx;
        font-weight: 500;
        color: #303133;
        margin-right: 10rpx;
      }
      text:nth-child(2) {
        font-size: 20rpx;
        color: #fff;
        padding: 0 10rpx;
        border-radius: 30rpx 30rpx 30rpx 0;
      }
    }
    .all {
      color: $mxg-text-color-grey;
      font-size: 28rpx;
    }
  }
</style>
